@include('public.head')
<body class="gray-bg">
    <div class="wrapper wrapper-content animated fadeInRight">

        <div class="row" >
            <div class="col-sm-12" >
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>所有产品出货价格变动</h5>
                        <div class="ibox-tools">

                        </div>
                    </div>
                    <div class="ibox-content" >
                        <div class="flot-chart">
                            <div class="flot-chart-content" id="flot-line-chart-multi" style="height: 260%"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>


        <!-- Flot -->
    <script src="/js/plugins/flot/jquery.flot.js"></script>
    <script src="/js/plugins/flot/jquery.flot.tooltip.min.js"></script>
    <script src="/js/plugins/flot/jquery.flot.resize.js"></script>
    <script src="/js/plugins/flot/jquery.flot.pie.js"></script>
      <!-- Flot demo data -->
 <script>


//Flot Multiple Axes Line Chart
$(function() {

    @php
           $label = json_encode($label,1);
           echo 'var label ='.$label.';';
    @endphp

    function euroFormatter(v, axis) {
        return "&yen;"+v.toFixed(axis.tickDecimals);
    }

    function doPlot(position) {
        $.plot($("#flot-line-chart-multi"),label,

            {
            xaxes: [{
               min: 20200411014648
            }],
            yaxes: [{
                min: 3
            }, {
                // align if we are to the right
                alignTicksWithAxis: position == "right" ? 1 : null,
                position: position,
                tickFormatter: euroFormatter
            }],
            legend: {
                position: 'sw'
            },
            colors: ["#1ab394"],
            grid: {
                color: "#999999",
                hoverable: true,
                clickable: true,
                tickColor: "#D4D4D4",
                borderWidth:0,
                hoverable: true //IMPORTANT! this is needed for tooltip to work,

            },
            tooltip: true,
            tooltipOpts: {
                content: "%s %x 为 %y",
                // xDateFormat: "%y-%0m-%0d",
                onHover: function(flotItem, $tooltipEl) {
                    // console.log(flotItem, $tooltipEl);
                }
            }

        });
    }

    doPlot("right");

    $("button").click(function() {
        doPlot($(this).text());
    });
});





</script>